/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
	position:absolute;
	padding:15px;
	margin:1em 0 3em;
	border:5px solid #5a8f00 !important;
	color:#333;
	background:#fff;
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
	margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
	margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
	border-style:solid;
    border-color:#5a8f00 transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
	content:"";
	position:absolute;
	bottom:-13px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	border-width:13px 13px 0;
	border-style:solid;
	border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
	top:-20px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:40px; /* controls horizontal position */
    border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
	top:-13px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
	top:10px; /* controls vertical position */
	bottom:auto;
	left:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 30px 15px 0;
	border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
	left:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 21px 9px 0;
	border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
	top:10px; /* controls vertical position */
	bottom:auto;
    left:auto;
	right:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 0 15px 30px;
	border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
    left:auto;
	right:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 0 9px 21px;
	border-color:transparent #fff;
}

/* ============================================================================================================================
== RECTANGLE-BORDER STYLE WITH CURVE
** ============================================================================================================================ */

.rectangle-speech-border {
	position:absolute;
	padding:15px;
	margin:1em 0 3em;
	border:5px solid #5a8f00 !important; 
	/*text-align:center; */
	color:#333;
	background:#fff; 
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}


/* creates larger curve */
.rectangle-speech-border:before {
	content:""; 
	position:absolute; 
	z-index:10; 
	bottom:-40px; 
	left:50px; 
	width:50px; 
	height:30px;
	border-style:solid; 
	border-width:0 5px 5px 0; 
	border-color:#5a8f00; 
	background:transparent;
	/* css3 */
	-webkit-border-bottom-right-radius:80px 60px;
	-moz-border-radius-bottomright:80px 60px;
	border-bottom-right-radius:80px 60px;
    /* reduce the damage in FF3.0 */
    display:block; 
}


/* creates smaller curve */
.rectangle-speech-border:after {
	content:""; 
	position:absolute; 
	z-index:10; 
	bottom:-40px; 
	left:51px; 
	width:20px; 
	height:30px; 
	border-style:solid; 
	border-width:0 5px 5px 0; 
	border-color:#5a8f00; 
	background:transparent;
	/* css3 */
	-webkit-border-bottom-right-radius:40px 50px; 
	-moz-border-radius-bottomright:40px 50px; 
	border-bottom-right-radius:40px 50px; 
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
	content:""; 
	position:absolute; 
	bottom:-40px; 
	left:45px; 
	width:10px; 
	height:10px;
	background:#5a8f00;
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
	content:""; 
	position:absolute; 
	bottom:-10px; 
	left:76px; 
	width:24px; 
	height:15px; 
	background:#fff;
}

/* ============================================================================================================================
== OVER SPEECH BUBBLE, EMPTY, WITH BORDER (more CSS3)
** ============================================================================================================================ */
.oval-speech-border {
	position:absolute; 
	padding:30px;
	margin:1em auto 60px;
	border:5px solid #5a8f00 !important; 
	text-align:center;
	color:#333; 
	background:#fff;
	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
	Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
	*/
	-webkit-border-top-left-radius:240px 140px;
	-webkit-border-top-right-radius:240px 140px;
	-webkit-border-bottom-right-radius:240px 140px;
	-webkit-border-bottom-left-radius:240px 140px;
	-moz-border-radius:240px / 140px;
	border-radius:240px / 140px;
}

/* creates larger curve */
.oval-speech-border:before {
	content:""; 
	position:absolute; 
	z-index:2; 
	bottom:-40px; 
	right:50%; 
	width:50px; 
	height:30px;
	border-style:solid;
	border-width:0 5px 5px 0;
	border-color:#5a8f00;
	margin-right:-5px;
	background:transparent;
	/* css3 */
	-webkit-border-bottom-right-radius:80px 50px;
	-moz-border-radius-bottomright:80px 50px;
	border-bottom-right-radius:80px 50px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates smaller curve */
.oval-speech-border:after {
	content:""; 
	position:absolute; 
	z-index:2; 
	bottom:-35px; 
	right:50%; 
	width:20px; 
	height:31px; 
	border-style:solid;
	border-width:0 5px 5px 0;
	border-color:#5a8f00;
	margin-right:30px;
	background:transparent;
	/* css3 */
	-webkit-border-bottom-right-radius:40px 50px; 
	-moz-border-radius-bottomright:40px 50px; 
	border-bottom-right-radius:40px 50px; 
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates a small circle to produce a rounded point where the two curves meet */
.oval-speech-border > :first-child:before {
	content:""; 
	position:absolute; 
	z-index:1; 
	bottom:-40px; 
	right:50%; 
	width:10px; 
	height:10px;
	margin-right:45px;
	background:#5a8f00;
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* creates a white rectangle to cover part of the oval border*/
.oval-speech-border > :first-child:after {
	content:""; 
	position:absolute; 
	z-index:1; 
	bottom:-10px; 
	right:50%; 
	width:30px; 
	height:15px; 
	background:#fff;
}

/* ============================================================================================================================
== OVER THOUGHT BUBBLE, EMPTY, WITH BORDER (more CSS3)
** ============================================================================================================================ */

.oval-thought-border {
	position:absolute;
	padding:30px;
	text-align:center;
	margin:1em auto 60px;
	border:5px solid #5a8f00 !important; 
	color:#333; 
	background:#fff;
	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
	Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
	*/
	-webkit-border-top-left-radius:240px 140px;
	-webkit-border-top-right-radius:240px 140px;
	-webkit-border-bottom-right-radius:240px 140px;
	-webkit-border-bottom-left-radius:240px 140px;
	-moz-border-radius:240px / 140px;
	border-radius:240px / 140px;
}

/* creates the larger circle */
.oval-thought-border:before {
	content:""; 
	position:absolute; 
	z-index:10; 
	bottom:-47px; 
	right:60px; 
	width:30px; 
	height:30px;
	border:5px solid #5a8f00;
	background:#fff;
	/* css3 */
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates the smaller circle */
.oval-thought-border:after {
	content:""; 
	position:absolute; 
	z-index:10; 
	bottom:-70px; 
	right:50px; 
	width:15px; 
	height:15px; 
	border:5px solid #5a8f00;
	background:#fff;
	/* css3 */
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	border-radius:25px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* ============================================================================================================================
== bubble custom ulum cekibrot
square-line-border
** ============================================================================================================================ */
.square-line-border {
	position:absolute;
	padding:15px;
	margin:1em 0 3em;
	border:5px solid #5a8f00 !important; 
	/*text-align:center; */
	color:#333;
	background:#fff; 
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}


/* creates larger curve */
.square-line-border:before {
	background: none repeat scroll 0 0 transparent;
    border-color: #5A8F00;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    bottom: -50px;
    content: "";
    display: block;
    height: 45px;
    left: 50px;
    position: absolute;
    transform: rotate(220deg);
	-ms-transform:rotate(220deg); /* IE 9 */
	-webkit-transform:rotate(220deg); /* Safari and Chrome */
    width: 0;
    z-index: 10;
}

/* creates a small circle to produce a rounded point where the two curves meet */
.square-line-border > :first-child:before {
	background: none repeat scroll 0 0 #5A8F00;
    border-radius: 10px 10px 10px 10px;
    bottom: -50px;
    content: "";
    height: 10px;
    left: 45px;
    position: absolute;
    width: 0px;
}

/* creates a white rectangle to cover part of the oval border*/
.square-line-border > :first-child:after {
	background: none repeat scroll 0 0 #FFFFFF;
    bottom: -10px;
    content: "";
    height: 15px;
    left: 76px;
    position: absolute;
    width: 0px;
}
